<template>
    <div>
        <div class="recommend-title">
          贤哥安利
        </div>
        <div class='movie-img border-bottom' v-for="item of imgList" :key="item.id">
            <div class="recommend-img">
                <img :src="item.imgUrl" class="img">
            </div>
            <p class="recommend-desc">都是好电影</p>
            <p class="recommend-icon">
                <span class="iconfont">&#xe623;</span><span class="iconfont">&#xe744;</span>
                <span class="iconfont">&#xe744;<span class="recommend-comment">评论数</span></span>
            </p>
        </div>
    </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      imgList: [{
        id: '0001',
        imgUrl: require('../../../assets/picture/2.jpg')
      },
      {
        id: '0002',
        imgUrl: require('../../../assets/picture/1.jpg')
      },
      {
        id: '0003',
        imgUrl: require('../../../assets/picture/3.jpg')
      },
      {
        id: '0004',
        imgUrl: require('../../../assets/picture/4.jpg')
      }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
    .recommend-title
      height: .3rem
      line-height:.2.3rem
      text-align: center
      margin-top: .2rem
      color:red
      background: #eee
    .movie-img
      position relative
      float: left
      width:45%
      padding-bottom :75%
      margin-left:.25rem
      margin-top:.2rem
      background: yellow
      .recommend-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .88rem
        border-radius:.1rem
        border-style: solid
        overflow hidden
        .img
          width:100%
     .recommend-desc
        position: absolute
        left: 0
        right: 0
        bottom: .44rem
        height: .44rem
        color:blue
        line-height: .44rem
        text-align: center
     .recommend-icon
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: .44rem
        color:blue
        line-height: .44rem
        text-align: center
        .iconfont
          margin-left:.25rem
          margin-right:.25rem
         .recommend-comment
           background:red
           font-size:40%
</style>
